<template>
    <div class="module-name pt10 pl10 pr10 ">
        <avue-crud v-model="dialogForm" :data="data" :option="option" :page.sync="page" :search.sync="searchForm"
                   :table-loading="loading"
                   @on-load="onLoad"
                   @search-change="handleSearchChange"
                   @row-save="handleSave"
                   @row-update="handleUpdate"
                   @row-del="handleDel">
            <!-- 自定义菜单-->
            <!--            <template slot-scope="scope" slot="menuRight">-->
            <!--                <el-button type="warning" size="mini">数据源</el-button>-->
            <!--            </template>-->
            <!--row插槽-->
            <template slot="status" slot-scope="{row}">
                <el-tag v-show="row.status === 1">正常</el-tag>
                <el-tag v-show=" row.status === 0" type="danger">禁用</el-tag>
            </template>
            <template slot="roleList" slot-scope="{row}">
                <el-tag v-for="(item,index) in row.roleList" :key="index" style="margin-right: 10px">{{
                        item.name
                    }}
                </el-tag>
            </template>
            <!--自定义操作栏-->
            <template slot="menu" slot-scope="{ row }">
                <el-link class="mr10 ml5" icon="el-icon-s-tools" size="mini" type="primary" @click="handelRoleSet(row)">
                    权限配置
                </el-link>
                <el-link icon="el-icon-s-tools" size="mini" type="primary" @click="handelChildSet(row)">子集配置
                </el-link>
            </template>
        </avue-crud>
        <RolePopup ref="rolePopup" v-model="popup.roleShow" :currentData="currentRow" @success="success"></RolePopup>
        <ChildPopup ref="childPopup" v-model="popup.childShow" :currentData="currentRow"></ChildPopup>

    </div>
</template>
<script>
import page from "@/mixins/page";
import RolePopup from './rolePopup.vue'
import ChildPopup from './childPopup.vue'

import {dic} from "@/config";
import fa from "element-ui/src/locale/lang/fa";

export default {
    name: "userList",
    mixins: [page],
    components: {RolePopup, ChildPopup},
    data() {
        return {
            //分页参数
            searchForm: {},
            urls: {
                0: 'user',
                1: 'findPage',
            },

            data: [],
            option: {
                ...window.avueCrud,
                addBtn: true,
                editBtn: true,
                viewBtn: true,
                delBtn: true,
                menuWidth: 400,
                column: [
                    {
                        label: '用户id',
                        prop: 'id',
                        search: true,
                        display: false
                    },
                    {
                        label: 'username',
                        prop: 'username',
                        search: true,
                        rules: [{
                            required: true,
                            message: "请输入username",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: 'password',
                        prop: 'password',
                        search: true,
                        hide: false,
                        addDisplay: true,
                        editDisplay: false,
                        rules: [{
                            required: true,
                            message: "请输入password",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: '角色',
                        prop: 'roleList',
                        width: 300,
                        display: false
                    },
                    {
                        label: '归属',
                        prop: 'superId',
                        display: false
                    },
                    {
                        label: '余额',
                        prop: 'balance',
                    },
                    {
                        label: '电话',
                        prop: 'phone',
                    },
                    {
                        label: '头像',
                        prop: 'avatar',
                        type: 'img',
                        display: false,
                    },
                    {
                        label: '状态',
                        prop: 'status',
                        search: true,
                        type: 'select',
                        ...dic,
                        dicQuery: {
                            code: 'status',
                        },
                    },
                    {
                        label: '创建时间',
                        prop: 'createAt',
                        display: false,
                    },
                    {
                        label: '修改时间',
                        prop: 'updateAt',
                        display: false,
                    },

                ],
            },
            dialogForm: {},
            currentRow: {},
            popup: {
                roleShow: false,
                childShow: false
            }
        };
    },
    methods: {
        async handleUpdate(row, index, done, disabled) {
            try {
                const {code} = await this.$api.user.update({
                    id: row.id,
                    email: row.email,
                    username: row.username,
                    phone: row.phone,
                    status: row.status,
                    balance: row.balance,
                })
                if (code === 200) {
                    this.$notify({
                        message: '更改成功',
                        type: 'success',
                        duration: 2000,
                    })
                    this.getData(this.searchForm)
                    done()
                }
            } catch (e) {
                disabled()
            }
        },

        async handleSave(row, done, disabled) {
            try {
                const {code, msg} = await this.$api.user.create({
                    password: row.password,
                    username: row.username,
                    phone: row.phone,
                    balance: row.balance,
                })
                if (code === 200) {
                    this.getData(this.searchForm)
                    this.$notify({
                        message: msg || '创建成功',
                        type: 'success',
                        duration: 2000,
                    })
                }
                done()
            } catch (e) {
                disabled()
            }
        },

        async handleDel(row) {
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(async () => {
                    const {code} = await this.$api.user.remove(row.id)
                    if (code === 200) {
                        this.getData(this.searchForm)
                        this.$notify({
                            message: '删除成功',
                            type: 'success',
                            duration: 2000,
                        })
                    }
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                    })
                })
        },

        handelRoleSet(row) {
            this.currentRow = row
            this.popup.roleShow = true
            this.$nextTick(() => {
                this.$refs.rolePopup.getTree()
            })
        },

        handelChildSet(row) {
            this.currentRow = row
            this.popup.childShow = true
            this.$nextTick(() => {
                this.$refs.childPopup.getTree()
            })
        },

        success() {
            this.getData(this.searchForm)
        }
    }
};
</script>

<style lang="scss" scoped>
.module-name {
}
</style>
